<template>
  <div class="table-container">
    <el-table
      ref="dataTable"
      :data="data || []"
      :height="tableHeight"
      :script="stripe"
      :border="border"
      header-row-class-name="table-header-row"
      highlight-current-row
      @row-click="handleRowClick"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column
        v-if="showIndex"
        label="序号"
        type="index"
        width="60"
        align="center"
      ></el-table-column>
      <slot></slot>
    </el-table>
    <div class="pagination" v-if="!!pagination">
      <el-pagination
        :current-page="pagination.page"
        :page-size="pagination.pageSize"
        :page-sizes="[15, 30, 50, 100]"
        background
        :layout="layout"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="text-align: right"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";

const emit = defineEmits(["rowSelected", "rowClick"]);
const props = defineProps({
  stripe: {
    type: Boolean,
    default: true,
  },
  border: {
    type: Boolean,
    default: false,
  },
  showIndex: {
    type: Boolean,
    default: false,
  },
  height: {
    type: [Number, String],
    default: 0,
  },
  extHeight: {
    type: Number,
    default: 0,
  },
  data: Array,
  fetch: Function,
  pagination: {
    type: Object,
  },
});
const layout = computed(() => {
  return `total, ${props.pagination ? "sizes" : ""}, prev, pager, next, jumper`;
});
const topHeight = 56 + 20 + 32 + 56;
const tableHeight = ref(
  props.height ? props.height : window.innerHeight - topHeight - props.extHeight
);

const handleRowClick = () => {
  emit("rowClick");
  console.log("click");
};
const handleSelectionChange = () => {
  console.log("click");
};
const handleSizeChange = () => {
  console.log("click");
};
const handleCurrentChange = () => {
  console.log("click");
};
</script>

<style lang="scss" scoped>
.table-container {
  .pagination {
    height: 46px;
    padding: 10px 10px 0 0;
  }
}
</style>
